<!DOCTYPE html>
<html>
	<%- include("head.ejs", {title: title}) %>
	<link rel='stylesheet' href='/stylesheets/index.css' />

  <body>
  
  <div>
      <%- include("header.ejs", {title: title}) %>
  </div>
  <div class="mb20">
	<div class="swiper">
		<div class="swiper-wrapper">
			<div class="swiper-slide blue-slide">
				<img src="./images/header.png" alt="">
			</div>
		</div>
		<!-- <div class="swiper-pagination"></div> -->
		<!-- <div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
		<div class="swiper-scrollbar"></div> -->
	</div>

  </div>
  <div class="gd-main gd-bflex mb60">
	<div class="left-nav">
		<div class="letf-title">最新动态</div>
		<ul>
			<%for(var i =0; i < leftList.length; i++){%>
				  <li class="tab_item">
				  	<%=leftList[i].title%>
				 </li>
			<%}%>
		</ul>
	</div>
	<div class="rigth-nav">
		<div class="rigth-banner mb20">
			<div class="right-title">
				网友:4岁老艺术家的松弛感! 近日,贵州萌娃、“电子女儿”瑶一瑶上央视啦,摆pose,出大片,给大家安利贵州美食猪儿粑、折耳根。
			</div>
		</div>

		<div class="swiper-container">
			<div class="swiper-wrapper">
				<%for(var i =0; i < leftList.length; i++){%>
					<div class="swiper-slide">
						<img src="<%- leftList[i].src%>">
						<div class="banner">
							<p><a href="<%- leftList[i].link%>" target="_blank" rel="noopener noreferrer"> <%=leftList[i].msg%></a></p>
						</div>
				   </div>
				  <%}%>
			</div>
			<!-- <div class="swiper-pagination"></div> -->
			<div class="swiper-button-left"></div>
			<div class="swiper-button-right"></div>
		  </div>
		
	</div>


	

  </div>

  <div class="gd-main gd-bflex mb60">
	<div class="left-new">
		<img src="./images/news.png" alt="">
	</div>
	<div class="hire-msg gd-bflex">
		<div class="hire-title">招聘信息</div>
		<ul>
			<%for(var i =0; i < hireList.length; i++){%>
				<li class="tab_item active">
				  	<a href="<%- hireList[i].link%>"><%=hireList[i].title%></a> >
				</li>
			<%}%>
		</ul>
	</div>
  </div>

  <div class="gd-main mb10">
	<div class="top-title">研究专栏</div>
  </div>

  <div class="gd-main gd-bflex mb60">
	<div class="left-box heigtht-box">
		<ul>
			<%for(var i =0; i < hireList.length; i++){%>
				<li class="tab_item active">
				  	<a href="<%- hireList[i].link%>">
						<p><%=hireList[i].time%></p>
						<p><%=hireList[i].title%></p>
					</a>
				</li>
			<%}%>
		</ul>
		<div class="more">
			<a href="">点击查看更多 &gt; </a>
		</div>
	</div>
	<div class="right-box heigtht-box">
		<div class="right-title">最近学术活动信息</div>
		<ul>
			<%for(var i =0; i < hireList.length; i++){%>
				<li class="tab_item active">
				  	<a href="<%- hireList[i].link%>"><%=hireList[i].time%> <%=hireList[i].title%></a>
				</li>
			<%}%>
		</ul>
		<div class="more">
			<a href="">点击查看更多 &gt; </a>
		</div>
		
	</div>
  </div>


  <div class="gd-main mb60">
	<div class="bottom-box gd-bflex">
		<%for(var i =0; i < infoList.length; i++){%>
			<div class="item">
				<div class="pic">
					<img src="<%- infoList[i].src%>">
				</div>
				<p><%=infoList[i].msg%></p>
		   </div>
		  <%}%>
  </div>
  </div>




  
    
	
	
	<div>
	    <%- include("footer.ejs") %>
	</div>
	
	<script>
		var mySwiper = new Swiper('.swiper',{
			watchOverflow: true,//因为仅有1个slide，swiper无效
			navigation: {
				nextEl: '.swiper-button-next',//自动隐藏
				prevEl: '.swiper-button-prev',//自动隐藏
			},
			pagination: {
				el: '.swiper-pagination',//自动隐藏
			},
			scrollbar: {
				el: '.swiper-scrollbar',//自动隐藏
			},
		})
		var swiper = new Swiper ('.swiper-container', {
			initialSlide: 0,
		    loop: true, // 循环模式选项
		    // 如果需要分页器
		    pagination: {
		      el: '.swiper-pagination',
		    },
			uniqueNavElements: true,

		    // 如果需要前进后退按钮
		    navigation: {
		      nextEl: '.swiper-button-right',
		      prevEl: '.swiper-button-left',
		    }
		  })
		  $(".left-nav ul li").click(function(){
			var index = $(this).index();
			console.log(index);
			swiper.slideTo(index, 0, false);
			
			$(".left-nav ul li").removeClass("active")
			$(this).addClass("active")
		  })
	</script>

  </body>
</html>


